<template>
  <div class="hello">
    <el-form :inline="true"  class="demo-form-inline">
      <el-form-item label="搜索条件">
        <el-input v-model="con"></el-input>
      </el-form-item>
      <el-button @click="selectByCon">搜索</el-button>
      <el-button @click="add=true">添加</el-button>
      </el-form>

      <el-table
        :data="empListL"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="编号"
          width="180">
        </el-table-column>
        <el-table-column
          label="姓名"
          width="180">
          <template slot-scope="scope">
            <div v-html="scope.row.name"></div>
          </template>
        </el-table-column>
        <el-table-column
          prop="bir"
          label="生日">
        </el-table-column>
        <el-table-column
          label="介绍">
          <template slot-scope="scope">
              <div v-html="scope.row.content"></div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="deleteById(scope.row.id)">删除</el-button>
          </template>

        </el-table-column>
      </el-table>

    <el-dialog
      title="提示"
      :visible.sync="add"
      width="30%">
<!--      :before-close="handleClose"-->
      <el-form ref="form" :model="emp" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="emp.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="emp.age"></el-input>
        </el-form-item>
        <el-form-item label="生日">
          <el-date-picker
            v-model="emp.bir"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="介绍">
          <el-input v-model="emp.content" type="textarea" rows="5"></el-input>
        </el-form-item>

        <el-form-item label="地址">
          <el-input v-model="emp.address"></el-input>
        </el-form-item>



      </el-form>
    <el-button @click="add = false">取 消</el-button>
    <el-button type="primary" @click="insert">确 定</el-button>

    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      empListL:[],
      con:"",
      add:false,
      emp:{}
    }
  },
  created() {
    this.select()
  },
  methods:{
    deleteById(id){
      this.axios.delete("/emps/"+id).then((resp)=>{
        this.select()
      })
    },
      selectByCon(){
        this.axios.get("/emps?con="+this.con).then((resp)=>{
          this.empListL=resp.data;
        })
    },
    select(){
      this.axios.get("/emps").then((resp)=>{
        this.empListL=resp.data;
      })
    },
    insert(){
        this.axios.post("/emps",this.emp).then((resp)=>{
          this.$message.success("添加成功");
          this.select();
          this.add=false;
          this.emp={}
        })
    },


  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
